<template>
  <div class="person">
  姓: <input type="text" 
  v-model:="firstName"><br>
  名:<input type="text"
  v-model:="lastName"><br>
  <button @click="changeFull"> 改为li-si</button>
  全名:<span>{{ fullName }}</span> <br>
  </div>
</template>
<script setup lang="ts" name="person">
import {ref,computed} from 'vue'

let firstName =ref("zhang")
let lastName =ref('san')

// 定义fullname计算属性 不可以修改
const fullName = computed({
get(){
  return  firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value

},
set(val){
  const [str1,str2] = val.split('-')
  firstName.value = str1
  lastName.value = str2  
  console.log(val);
  
  
}
})

const changeFull =()=>{
  fullName.value = 'li-si'
  
}
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
